<template>
	<div class="post">
		<el-row style="margin-top: 40px;margin-bottom: 24px;">
			<el-col>
				<head-top title='发布职位'></head-top>
				<div class="postsection">
					<div class="item flex">
						<div class="title">职位名称：</div>
						<div class="right">
							<el-input v-model="value" placeholder="输入职位名称"></el-input>
						</div>
					</div>
					<div class="item flex">
						<div class="title">所属行业：</div>
						<div class="right">
							<el-select v-model="param.jobHy" placeholder="请选择所属行业" class="ipt">
								<el-option v-for="item in hyList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="item flex">
						<div class="title">职位类别：</div>
						<div class="right">
							<el-cascader placeholder="职位类别" :options="JobType" filterable :props="jobprops"></el-cascader>
						</div>
					</div>
					<div class="item flex">

						<div class="title">薪资范围：</div>
						<div class="right">
							<el-select v-model="param.jobMoney" placeholder="选择薪资范围">
								<el-option v-for="item in JobMoneyList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="item flex">
						<div class="title">工作地点：</div>
						<div class="right">
							<el-input v-model="value" placeholder="填写地址"></el-input>
						</div>
					</div>
					<div class="item flex">
						<div class="title">工作经验：</div>
						<div class="right">
							<el-select v-model="param.jobYear" placeholder="工作经验" class="qtselect">
								<el-option v-for="item in YearList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="item flex">
						<div class="title">学历：</div>
						<div class="right">
							<el-select v-model="value" placeholder="选择学历">
								<el-option v-for="item in EduList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="gzdd">
					  <Maps @lnglat='getlnglat' ref='getAdr' :typeMap='1'></Maps>	
					</div>
					
					
					
				</div>
				<div class="zwms">
					职位描述
				</div>
				<div class="gwzz">岗位职责</div>
				<textarea id="textarea" cols="30" rows="10"></textarea>
				<div class="gwzz" style="margin-top: 20px;">岗位职责</div>
				<textarea id="textarea" cols="30" rows="10"></textarea>

				<div class="postst">
					发布试题
					<el-select v-model="value1" placeholder="设定答题时间" class="selectime">
						<el-option v-for="item in times" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<span>标注：时间设置最长90分钟，试题不得超过45个</span>

				</div>


				<div class="stteplate">

					<div class="wdt flex">
						<div class="sh">1、</div>
						<div class="right flex">
							<el-input class="input1" type="text" autosize placeholder="请输入题目标题" v-model="textarea2">
							</el-input>
							<el-input class="input1" type="textarea" autosize placeholder="请输入正确答案" v-model="textarea2">
							</el-input>
						</div>
					</div>

					<div class="wdt flex">
						<div class="sh">1、</div>
						<div class="right flex">
							<el-input class="input1" type="text" autosize placeholder="请输入题目标题" v-model="textarea2">
							</el-input>
							<div class="txxx flex">
								<span>A</span>
								<el-input class="input1" type="text" autosize placeholder="请输入题目标题" v-model="textarea2"></el-input>
							</div>
							<div class="txxx flex">
								<span>B</span>
								<el-input class="input1" type="text" autosize placeholder="请输入题目标题" v-model="textarea2"></el-input>
							</div>
							<div class="txxx flex">
								<span>C</span>
								<el-input class="input1" type="text" autosize placeholder="请输入题目标题" v-model="textarea2"></el-input>
							</div>
							<div class="txxx flex">
								<span>D</span>
								<el-input class="input1" type="text" autosize placeholder="请输入题目标题" v-model="textarea2"></el-input>
							</div>
						</div>
					</div>

					<div class="addrow flex">
						<div class="item">+添加选择题</div>
						<div class="item">+添加问答题</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import Maps from '@/components/map'
	import {
		GetHy,
		GetEduList,
		GetJobTypeList,
		GetJobMoneyList,
		GetJobYearList
	} from '@/api/getData'
	export default {
		data() {
			return {
				jobprops: {
					value: 'id',
					label: 'name',
					children: 'childs'
				},
				textarea2: '',
				options: [{
					value: '选项1',
					label: '黄金糕'
				}],
				times: [{
					value: 30,
					label: '30分'
				}, {
					value: 60,
					label: '60分'
				}, {
					value: 90,
					label: '90分'
				}],
				value: '',
				value1: '',
				hyList: [], //行业
				JobType: [], //职业类型
				EduList: [], //学历
				param: {
					jobHy: '',
					jobMoney: '',
					jobYear: ''
				},
				JobMoneyList: [],
				YearList: []
			}
		},
		components: {
			headTop,
			Maps
		},
		created() {
			let that = this;
			that.GetHy();
			that.JobTypeList();
			that.GetEduList();
			that.GetJobMoneyList();
			that.JobYearList();
		},
		methods: {
			//获取经纬度
			getlnglat(e){
				console.log('卡开');
				console.log(e);
				let that=this;
				that.info.lng=e.lng;
				that.info.lat=e.lat;
			},
			
			//获取年限
			async JobYearList() {
				let that = this;
				const res = await GetJobYearList();
				if (res.code == 1) {
					that.YearList = res.data;

				}
			},
			//获取薪资列表
			async GetJobMoneyList() {
				let that = this;
				const res = await GetJobMoneyList();
				if (res.code == 1) {
					that.JobMoneyList = res.data;

				}
			},
			//获取职业类别
			async JobTypeList() {
				let that = this;
				const res = await GetJobTypeList();
				if (res.code == 1) {

					that.JobType = res.data;

				}
			},
			//获取学历
			async GetEduList() {
				let that = this;
				const res = await GetEduList();
				if (res.code == 1) {
					that.EduList = res.data;

				}
			},
			//获取行业列表
			async GetHy() {
				let that = this;
				const res = await GetHy();
				if (res.code == 1) {
					that.hyList = res.data;

				}
			},
		}
	}
</script>
<style>
	.postsection .el-input__inner,
	.postst .el-input__inner {
		/* height: 28px; */

		border: 1px solid #EEEEEE;
	}

	.postsection .el-input,
	.postsection .el-select {
		width: 240px;
	}

	.postst .el-input,
	.postst .el-select {
		width: 240px;
	}


	.postsection .el-input__icon,
	.postst .el-input__icon {
		/* line-height: 28px; */
	}

	.wdt .el-input__inner {
		/* height: 28px; */
	}
</style>
<style lang="less" scoped="scoped">
	@import '../../style/mixin';
     .gzdd{
		 margin: 20px 0px;
	 }
	.post {
		.stteplate {
			width: 100%;
			height: auto;
			padding: 17px 40px;
			box-sizing: border-box;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;

			.wdt {
				display: flex;
				align-items: baseline;
				border-bottom: 1px solid #EEEEEE;
				padding-top: 24px;
				padding-bottom: 6px;
				box-sizing: border-box;

				.right {
					flex-direction: column;

					.txxx {
						width: 630px;
						display: flex;
						align-items: baseline;

						span {
							color: #666666;
							font-size: 16px;
							margin-right: 10px;
						}

						.input1 {
							flex: 1 !important;
						}
					}

					.input1 {
						width: 630px;
						height: 28px;
						line-height: 28px;
						background: #F8F8FB;
						border: 1px solid #EEEEEE;
						margin-bottom: 14px;
					}
				}
			}

			.addrow {
				padding-left: 222px;
				padding-top: 30px;
				box-sizing: border-box;

				.item {
					color: #226FFF;
					font-size: 14px;
					line-height: 36px;
					text-align: center;
					width: 110px;
					height: 36px;
					background: #FFFFFF;
					border: 1px dashed #226FFF;
					margin-right: 40px;
				}
			}
		}

		// .stteplate{
		// 	padding-left: 222px;
		// 	padding-top: 30px;
		// 	box-sizing: border-box;
		// }

		.postst {
			width: 100%;
			color: #333333;
			border-left: 4px solid #226FFF;
			font-weight: bold;
			font-size: 24px;
			display: flex;
			margin: 60px 0px 24px;
			align-items: center;
			padding-left: 20px;

			span {
				color: #FF4422;
				font-size: 14px;
			}

			.selectime {
				margin: 0px 34px 0px 20px;
			}
		}

		.zwms {
			color: #333333;
			font-size: 16px;
			margin: 104px 0px 14px;
			font-weight: bold;
		}

		#textarea {
			width: 604px;
			padding: 10px;
			box-sizing: border-box;
			color: #999999;
			font-size: 14px;
		}

		.gwzz {
			color: #66666;
			font-size: 16px;
			margin-bottom: 10px;
		}

		.postsection {
			.item {
				margin-top: 20px;

				.title {
					color: #666666;
					font-size: 16px;
					width: 100px;
				}

				.right {

					height: auto;
				}
			}
		}
	}
</style>
